<template>
	<view :style="appThemeColor">
		<view class="index-title-bg">
			<view class="title-box">
				<view class="logo">
					<u-image src="/static/logo.png" mode="widthFix" width="100%" :showMenuByLongpress="false" :showLoading="false"
						:fade="false"></u-image>
				</view>
				<view class="search-box">
					<bb-search :city="city" @toLocation="toLocation" placeholder="可直接搜索要找的把关师、能人"
						@seachTap="$u.route('/pages/subpage/search/index',{type:1})"></bb-search>
				</view>
			</view>
		</view>
		<view class="placeholder-space"></view>
		<view class="content">
			<view class="u-flex enter-group">
				<view class="enter-btn" @click="navtoServe('/pages/subpage/publish/service')">
					<view class="enter-name">发布能力</view>
					<view class="enter-desc">能力能变现<br />发服务开店</view>
				</view>
				<view class="enter-btn" @click="navtoDemand('/pages/subpage/publish/demand')">
					<view class="enter-name">发布需求</view>
					<view class="enter-desc">万事变简单<br />发任务下单</view>
				</view>
				<view class="enter-btn" @click="$u.route('/pages/subpage/list/service')">
					<view class="enter-name">找把关师 </view>
					<view class="enter-desc">直接找能人<br />随叫随到帮</view>
				</view>
			</view>
			<view class="nav" v-show="navList.length>0">
				<u-grid :col="4" :border="false" @click="navClickHandle">
					<template v-for="(item,index) in navList">
						<u-grid-item :key="index" :index="item.id" v-if="item.is_show">
							<image class="grid-img" :src="item.pic" mode="aspectFill"></image>
							<view class="grid-text">{{item.name}}</view>
						</u-grid-item>
					</template>
				</u-grid>
			</view>

			<view class="banner-view" v-if="bannerList.length>0">
				<u-swiper :list="bannerList" duration="300" :circular="true" :height="160" :border-radius="20" :interval="3500"
					@click="bannerClickHandle"></u-swiper>
			</view>

			<view class="u-flex u-m-b-30">
				<text class="u-font-32 font-medium u-flex-1">附近把关师</text>
				<u-button type="primary" size="mini" shape="circle" hover-class="none" plain :customStyle="customBtnStyle"
					@click="resetAddress">
					<text class="iconfont icon-a-dingwei2"></text>
					<text class="u-main-color u-m-l-12">{{nearName || '获取位置'}}</text>
				</u-button>
			</view>
			<view class="menber-list">
				<view class="" v-for="(item,index) in powerList" :key="index">
					<bb-member :info="item"></bb-member>
				</view>
				<mescroll-empty :option="{tip:'还没有其他把关师入驻哦~' , btnText:'认证把关师'}" v-if="powerList.length==0"
					@emptyclick="emptyclick"></mescroll-empty>
			</view>
		</view>
		<u-modal v-model="showlocTips" :mask-close-able="true" confirm-text="切换" @confirm="confirm" show-cancel-button
			:confirm-color="config.mainColor">
			<view class="slot-content">
				{{`当前位置为"${addressComponent.city}",`}}
				<view class="">是否切换为实时位置</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import amap from '@/common/amap-wx.130.js';
	import config from '@/config.js'
	export default {
		data() {
			return {
				navList: [],
				customBtnStyle: {
					backgroundColor: '#fff !important'
				},
				amapPlugin: null,
				city: this.$store.state.vuex_address.city || config.D_CITY,
				nearName: this.$store.state.vuex_address.street + this.$store.state.vuex_address.number,
				addressComponent: {},
				showlocTips: false,
				location: this.$store.state.vuex_address.location || config.D_LOC,
				powerList: [],
				page: 1,
				nomore: false,
				config: this.$appConfig,
				bannerList: []
			}
		},
		onReady() {
			// this.getIndustryClass()
		},
		onLoad(option) {
			// console.log(option);
			this.getIndustryClass()
			this.getBanner()
			this.amapPlugin = new amap.AMapWX({
				key: config.AMAP_KEY
			})
			// #ifdef MP
			this.getRegeo()
			// #endif
		},
		async onShow() {
			uni.$off('chooseLocation')
			// #ifdef MP
			await this.$gps.getLocation()
			// #endif
			this.page = 1;
			this.getNearServicer()

		},
		onReachBottom() {
			if (!this.nomore) {
				this.page++;
				this.getNearServicer()
			}
		},
		methods: {
			getRegeo() {
				this.amapPlugin.getRegeo({
					success: (data) => {
						const {
							addressComponent,
						} = data[0].regeocodeData;
						const {
							streetNumber: {
								street,
								number,
								location
							},
							city,
							province,
							district
						} = addressComponent
						// console.log(addressComponent);
						this.addressComponent = {
							city,
							province,
							district,
							street,
							number,
							location
						}
						this.initPage()

					},
					fail: (err) => {
						// this.$u.toast(JSON.stringify(err))
						this.city = config.D_CITY
						this.nearName = config.D_ADDRESS
						this.location = config.D_LOC
						this.getNearServicer()
					}
				});
			},

			initPage() {
				const current = this.$store.state.vuex_address;
				if (!current || current.city === this.addressComponent.city) {
					const address = current || this.addressComponent
					this.$u.vuex('vuex_address', address)
					this.city = address.city
					this.nearName = address.street + address.number;
					this.location = address.location
				} else {
					this.showlocTips = true;
				}
				this.getNearServicer()
			},

			getBanner() {
				this.$u.api.public.index_banner().then(res => {
					this.bannerList = res
				})
			},

			bannerClickHandle(index) {
				const uri = this.bannerList[index].url;
				if (uri.indexOf('http') >= 0) {
					this.$u.route("/pages/subpage/webview/webview", {
						url: uri
					})
				}
			},

			confirm() {
				this.$u.vuex('vuex_address', this.addressComponent)
				this.city = this.addressComponent.city
				this.nearName = this.addressComponent.street + this.addressComponent.number;
				this.location = this.addressComponent.location
				// 搜索该位置的达人
				this.getNearServicer()
			},
			// 获取附近达人
			getNearServicer() {
				if (!this.location) return;
				this.$u.api.public.power_lst({
					location: this.location,
					order: 'location',
					page: this.page,
					limit: 10
				}).then(res => {
					this.powerList = this.page == 1 ? res : [...this.powerList, ...res];
					this.nomore = res.length < 10
				})
			},
			toLocation() {
				uni.$on('chooseLocation', (data) => {
					console.log(data);
					this.addressComponent = {
						...data
					};
					this.confirm()
				})
				this.$u.route('/pages/subpage/list/location', {
					appLoc: 1
				})
			},
			async resetAddress() {
				this.nearName = '定位中...';
				this.$u.vuex('vuex_address', "")
				this.$gps.lock = false;
				await this.$gps.getLocation();
				this.page = 1;
				this.getRegeo()
			},
			// 行业分类
			getIndustryClass() {
				this.$u.api.public.industry_class({
					pid: 0
				}).then(res => {
					this.navList = res
				})
			},
			navClickHandle(index) {
				this.$u.route('/pages/subpage/list/service', {
					id: index
				})
			},
			navtoServe(path) {
				const userInfo = this.$store.state.vuex_userInfo;
				if (userInfo && userInfo.is_power) {
					this.$u.route(path)
				} else {
					this.$u.route('/pages/subpage/profile/attestation')
				}
			},
			navtoDemand(path) {
				const userInfo = this.$store.state.vuex_userInfo;
				if (userInfo && userInfo.is_real) {
					this.$u.route(path)
				} else {
					this.$u.route('/pages/subpage/profile/autonym')
				}
			},
			emptyclick() {
				this.$u.route('/pages/subpage/profile/attestation')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-title-bg {
		height: 275rpx;
		overflow: hidden;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 999;
		padding: 3rpx 30rpx;
		background: linear-gradient(80deg, $u-type-primary 0%, $u-type-primary-light 120%);

	}

	.banner-view {
		margin-bottom: 30rpx;
	}

	.placeholder-space {
		height: 330rpx;
		background: linear-gradient(80deg, $u-type-primary 0%, $u-type-primary-light 100%);
	}

	.logo {
		width: 136rpx;
		margin-top: 90rpx;
		margin-left: 5rpx;
		margin-bottom: 30rpx;
	}

	.content {
		position: relative;
		z-index: 99;
		transform: translateY(-55rpx);
		padding: 0 30rpx;
	}

	.enter-group {

		justify-content: space-between;
		margin-bottom: 30rpx;

		.enter-btn {
			background-color: #fff;
			width: 216rpx;
			height: 200rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			background-size: cover;

			&:nth-child(1) {
				background-image: url(/static/service.png);
			}

			&:nth-child(2) {
				background-image: url(/static/need.png);
			}

			&:nth-child(3) {
				background-image: url(/static/seek.png);
			}

			.enter-name {
				font-size: 32rpx;
				line-height: 38rpx;
				color: #000000;
				margin-bottom: 10rpx;
			}

			.enter-desc {
				color: #999999;
				font-size: 24rpx;
			}
		}
	}

	.nav {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

		.grid-text {
			font-size: 28rpx;
		}

		.grid-img {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.slot-content {
		text-align: center;
		padding: 30rpx 0;
		font-size: 26rpx;
		color: $u-tips-color;
		line-height: 40rpx;
	}
</style>